<template>
  <div class="login-wrapper">
    <!--    <div class="logo">-->
    <!--      <el-image src="/static/img/LOUGO.png"/>-->
    <!--    </div>-->
    <div class="title">魂斗啰啰后台管理系统</div>
    <div class="content">
      <div class="login-content">
        <div class="login">
          <div class="logo">
            <el-image class="image" src="/static/img/logo.png"/>
          </div>
          <component
            :is="currentType.key"
            :from="wxconfig"
          />
        </div>
      </div>
    </div>
    <!--    <div class="footer"><a-->
    <!--      href="http://www.beian.miit.gov.cn"-->
    <!--      style="color: #777;"-->
    <!--    >粤ICP备17018009号</a> 武汉微巢电子商务有限公司版权所有(版本号:β-V3.1.0225)</div>-->

    <el-dialog
      :visible.sync="experience"
      title="请选择您要体验的版本"
      width="600px"
      center
    >
      <div class="dialog-experience">
        <!-- <el-button @click="experienceLoginType('15871367270')">刘君丹账号</el-button>
        <el-button @click="experienceLoginType('18033196581')">高级版本</el-button>
        <el-button @click="experienceLoginType('18800000000')">企业版本</el-button> -->
        <div
          class="dialog-experience-item"
          @click="experienceLoginType('13902000010')"
        >
          <div class="dialog-experience-item-header">
            基础版
          </div>
          <div class="dialog-experience-item-body">
            适合个人或三人以下运营的团队开店，满足商品销售基础经营需求
          </div>
        </div>
        <div
          class="dialog-experience-item"
          @click="experienceLoginType('18033196581')"
        >
          <div class="dialog-experience-item-header">
            专业版
          </div>
          <div class="dialog-experience-item-body">
            适合成长型电商、门店商家，满足推广获客、成交转化、客户留存、分享裂变等核心经营需求
          </div>
        </div>
        <div
          class="dialog-experience-item"
          @click="experienceLoginType('18800000000')"
        >
          <div class="dialog-experience-item-header">
            APP定制版
          </div>
          <div class="dialog-experience-item-body">
            适合规模化扩张、有多个经营场景需求的成熟商家，定制自有APP发展专属于自己的客户等深度经营需求
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="registerCompany"
      title="注册公司"
      width="30%"
    >
      <div>
        <el-form
          ref="ruleForm"
          :model="form"
          :rules="rules"
          label-width="100px"
        >
          <el-form-item
            label="手机号:"
            prop="telephone"
          >
            <el-input
              v-model="form.telephone"
              placeholder="请输入手机号"
            />
          </el-form-item>
          <el-form-item
            label="验证码:"
            prop="code"
          >
            <el-input
              v-model="form.code"
              placeholder="请输入验证码"
            >
              <el-button
                slot="append"
                :disabled="!show"
                type="text"
                style="width:100px;"
                @click="send()"
              >{{ show ? '获取验证码' : count + 's' }}</el-button>
            </el-input>

          </el-form-item>
          <div v-show="isHidden">
            <el-form-item
              label="意向产品:"
              prop="consumer_intention"
            >
              <el-select
                v-model="form.consumer_intention"
                placeholder="请选择意向产品"
              >
                <el-option
                  label="客服系统"
                  value="1"
                />
                <el-option
                  label="商城"
                  value="2"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              label="客户姓名:"
              prop="consumer_name"
            >
              <el-input
                v-model="form.consumer_name"
                placeholder="请输入您的姓名"
              />
            </el-form-item>
            <el-form-item
              label="公司名称:"
              prop="company_name"
            >
              <el-input
                v-model="form.company_name"
                placeholder="请输入公司名称"
              />
            </el-form-item>
            <el-form-item
              label="地址:"
              prop="consumer_address"
            >
              <el-input v-model="form.consumer_address" />
            </el-form-item>
          </div>
        </el-form>
      </div>
      <span
        v-show="isHidden"
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="registerCompany = false">取 消</el-button>
        <el-button
          type="primary"
          @click="register('ruleForm')"
        >确 定</el-button>
      </span>
    </el-dialog>
    <!--  底部  -->
    <div id="footer">
      <a
        href="javascript:void(0);"
        target="_blank"
      />
    </div>
  </div>
</template>

<script>
import userLogin from '@/views/login/userLogin'
import phoneLogin from '@/views/login/phoneLogin'
import scanLogin from '@/views/login/scanLogin'
import { getWeiXinConfig, WxLoginSubmit } from '@/api/loginDefine'
import { setToken, setCompanyId } from '@/utils/auth'
import { sendCode, addConsumer } from '@/api/user'
import { experienceLogin } from '@/api/loginDefine'
export default {
  name: 'Login',
  components: { userLogin, phoneLogin, scanLogin },
  data() {
    return {
      isHidden: false,
      show: true,
      count: '',
      timer: null,
      form: {
        telephone: '',
        code: '',
        consumer_intention: '',
        consumer_name: '',
        company_name: '',
        consumer_address: '',
        consumer_source: '微巢商城'
      },
      rules: {
        telephone: [
          { required: true, message: '请输入电话', trigger: 'blur' },
          { min: 11, max: 11, message: '长度为11个字符', trigger: 'blur' }
        ],
        consumer_intention: [
          { required: true, message: '请选择意向产品', trigger: 'change' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { min: 6, max: 11, message: '长度为6个字符', trigger: 'blur' }
        ],
        consumer_name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        company_name: [
          { required: true, message: '请输入公司名称', trigger: 'blur' }
        ],
        consumer_address: [
          { required: true, message: '请输入地址', trigger: 'blur' }
        ]
      },
      wxconfig: {},
      header: {
        title: '微桥云',
        href: 'www.weiqiao.com'
      },
      company_id: '',
      redirect: undefined,
      loginType: {
        userLogin: {
          key: 'userLogin',
          title: '密码登录',
          switchImg: require('@/assets/login/scan.png'),
          alink: '短信登录'
        },
        scanLogin: {
          key: 'scanLogin',
          title: '微信扫码登录',
          switchImg: require('@/assets/login/pc.png')
        },
        phoneLogin: {
          key: 'phoneLogin',
          title: '短信登录',
          switchImg: require('@/assets/login/scan.png'),
          alink: '密码登录'
        }
      },
      logo: require('@/assets/login/logo.png'),
      currentType: {
        key: 'userLogin',
        title: '密码登录',
        switchImg: require('@/assets/login/scan.png'),
        alink: '短信登录'
      },
      experience: false, // 体验账号弹框
      registerCompany: false // 注册公司弹框
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  created() {
    getWeiXinConfig().then(res => {
      this.wxconfig = res
    })
    this.company_id = process.env.company_id
  },
  mounted() {
    const wxcode = this.$route.query.code
    const wxstate = this.$route.query.state
    if (wxcode) {
      const data = {}
      data['code'] = wxcode
      data['state'] = wxstate
      WxLoginSubmit(data).then(res => {
        let [type, message] = ['success', '']
        if (res.code === 200) {
          type = 'success'
          message = '登陆成功！'
          // 设置统一的token和公司id
          setToken(res.data.token)
          setCompanyId(res.data.companycode)
          this.$store.dispatch('setLoadMenus', true)
          this.$router.push({ path: this.redirect || '/' })
        } else {
          type = 'error'
          message = res.msg
        }
        this.$notify({
          title: message,
          type: type,
          duration: 1500
        })
      })
    }
  },
  methods: {
    // 注册公司
    register(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          addConsumer(this.form).then(res => {
            if (res.result) {
              this.$notify({
                title: '注册公司成功',
                type: 'success',
                duration: 5000
              })
              this.registerCompany = false
              location.reload()
            } else {
              this.$notify({
                title: '注册公司失败',
                type: 'error',
                duration: 5000
              })
            }
          })
        } else {
          this.$notify({
            title: '请将数据填写完整',
            type: 'error',
            duration: 5000
          })
        }
      })
    },
    // 向微巢云获取验证码
    send() {
      if (!/^1[23456789]\d{9}$/.test(this.form.telephone)) {
        this.$notify({
          title: '请输入正确的手机号',
          type: 'error',
          duration: 5000
        })
        return
      }
      sendCode(this.form.telephone).then(res => {
        if (res.result) {
          this.$notify({
            title: '验证码发送成功',
            type: 'success',
            duration: 5000
          })
          this.getCode()
          this.isHidden = true
        } else {
          this.$notify({
            title: '验证码发送失败',
            type: 'error',
            duration: 5000
          })
        }
      })
    },
    // 验证码倒计时
    getCode() {
      const TIME_COUNT = 60
      if (!this.timer) {
        this.count = TIME_COUNT
        this.show = false
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--
          } else {
            this.show = true
            clearInterval(this.timer)
            this.timer = null
          }
        }, 1000)
      }
    },
    loginSwitchA() {
      this.currentType = this.loginType.scanLogin
    },
    loginSwitchB() {
      this.currentType = this.loginType.phoneLogin
    },
    loginSwitchC() {
      this.currentType = this.loginType.userLogin
    },
    experienceLoginType(type) {
      experienceLogin(type, '123456')
        .then(res => {
          if (res.code === '100000000000') {
            this.loading = false
            // 设置统一的token和公司id
            setToken(res.data.token)
            setCompanyId(res.data.companycode)
            this.$store.dispatch('setLoadMenus', true)
            this.$router.push({ path: this.redirect || '/' })
            /* getRoleList(username).then(res => {
            this.$store.commit('setUserInfo', { roles: res })
          })*/
          } else {
            this.$notify({
              title: res.msg,
              type: 'error',
              duration: 5000
            })
            this.loading = false
          }
        })
        .catch(error => {
          this.$notify({
            title: error,
            type: 'error',
            duration: 5000
          })
          this.loading = false
        })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.login-wrapper {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url('https://oss-ad.whtianshi.com/static/bac.png');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  min-width: 1080px;

  .title {
    font-size: 36px;
    font-weight: 600;
    color: #fff;
    margin-top: 100px;
  }

  .content {
    width: 954px;
    height: 458px;
    .login-content {
      width: 954px;
      margin: 0 auto;
      overflow: hidden;
      position: relative;
      z-index: 999;
      margin-top: 50px;

      .login {
        z-index: 999;
        width: 954px;
        height: 458px;
        border-radius: 15px;
        font-family: 'PingFang SC';
        display: flex;
        background-image: url('/static/img/login.png');
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: center;
        .logo {
          z-index: 1000;
          margin-left: 36px;
          width: 441px;
          height: 458px;
          display: flex;
          align-items: center;
          justify-content: center;
          .image {
            z-index: 1000;
            width: 325px;
            height: 233px;
          }
        }
        &-title {
          color: #7c848e;
          font-size: 15px;
          border-bottom: 1px solid #3d4044;
          padding-bottom: 3px;
          &-prefix {
            font-size: 35px;
            font-weight: bold;
            font-family: 'Microsoft YaHei';
            color: #535a62;
          }
        }
        &-form {
          width: 100%;
        }
        .line-two {
          color: #333333;
          display: flex;
          justify-content: space-between;
          width: 100%;
          div {
            width: 50%;
          }
          div:nth-child(1) {
            text-align: left;
          }
          div:nth-child(2) {
            text-align: right;
          }
        }
        .line-three {
          display: flex;
          color: #010101;
          font-size: 14px;
          justify-content: center;
          transform: translate(0, 30px);
          div {
            width: 50%;
            cursor: pointer;
          }
          div:nth-child(1) {
            text-align: left;
          }
          div:nth-child(2) {
            text-align: right;
          }
        }
      }
    }
  }
}
.footer {
  position: absolute;
  width: 100%;
  text-align: center;
  bottom: 30px;
}
.dialog-experience {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  &-item {
    width: 45%;
    margin: 0 2.5% 10px;
    display: flex;
    border: 1px solid #3b93ed;
    border-radius: 4px;
    height: 130px;
    align-items: center;
    cursor: pointer;
    &-header {
      height: 100%;
      width: 25px;
      color: #fff;
      background-color: #3b93ed;
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
      word-break: break-all;
      padding: 0 5px;
      display: flex;
      align-items: center;
    }
    &-body {
      flex: 1;
      line-height: 25px;
      letter-spacing: 2px;
      padding: 10px;
    }
  }
}
</style>
